<template>
  <div class="unit_container">
    <div class="unit_content flex">
      <div class="left_img_wrap">
        <img :src="'https://imagev2.xmcdn.com/' + item.albumCoverPath">
      </div>
      <div class="right_text_wrap">
        <div class="unit_title">{{ item.albumTitle }}</div>
        <div class="unit_intro">{{ item.intro }}</div>
        <div class="unit_data"><i class="iconfont icon-shengyin_o"></i><span>{{ item.albumTrackCount }}&emsp;<i
              class="iconfont icon-24gl-play"></i>{{ item.albumPlayCount }}</span></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { AnyObject } from '@/types/category';

const props = defineProps<{
  item: AnyObject
}>()
</script>

<style lang="less" scoped>
.unit_container {
  width: 96%;
  height: auto;
  margin-left: 4%;

  .unit_content {
    padding: 15px 10px 15px 0px;

    .left_img_wrap {
      width: 85px;
      padding-right: 15px;

      img {
        width: 70px;
        height: 70px;
        border-radius: 4px;
      }
    }

    .right_text_wrap {
      width: 265px;

      .unit_title {
        color: #333;
        font-size: 16px;
        line-height: 1.38;
      }

      .unit_intro {
        font-size: 13px;
        color: #999;
        margin: 5px 0 7px;
      }

      .unit_data {
        font-size: 12px;
        color: #999;

        span {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>